<template>
	<view style="min-height: 100vh;background: white;">
		<view style="padding: 24upx 32upx;">
			<view class="navHead">
				<view class="navHeadL">
					<view :class="['navHeadLItem',navIndex==0?'active':'']" data-index="0" @click="changeNav">用户指引</view>
					<view :class="['navHeadLItem',navIndex==1?'active':'']" data-index="1" @click="changeNav">商户指引</view>
				</view>
				<view class="navHeadR" @click="toCoustomer">
					<image src="/static/index/coustomer_act.png"></image>
					<view>联系客服</view>
				</view>
			</view>
			<view class="conWrap">
				<view class="conItem" v-for="(item,index) in conList" :key="index">
					<view class="conItemT" :data-index="index" @click="taggleItem">
						<view class="conItemTL">{{index+1}}.{{item.title}}</view>
						<image src="../../static/mine/select_top.png" v-if="item.flag"></image>
						<image src="../../static/mine/select_bottom.png" v-else></image>
					</view>
					<view class="conItemB" v-if="item.flag">
						<rich-text :nodes="item.content"></rich-text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex:0,
				conList:[],
				page:1,
				moreFlag:false
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			toCoustomer(){
				uni.navigateTo({
					url:"/pages/pagetwo/pages/coustomer/coustomer"
				})
			},
			taggleItem(e){
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let obj = this.conList[index];
				obj.flag = !obj.flag;
				this.conList.splice(index,1,obj);
			},
			getList(){
				let obj = {};
				obj.page = this.page;
				obj.type = Number(this.navIndex) + 1;
				this.$u.api.instructionsList(obj).then(res=>{
					//console.log(res)
					if(this.page == 1){
						this.conList = res.data.map(cur=>{
							cur.content = cur.content.replace(/<img/g,"<img style='width: 100%;'");
							cur.flag = false;
							return cur;
						});
					}else{
						this.conList = this.conList.concat(res.data.map(cur=>{
							cur.content = cur.content.replace(/<img/g,"<img style='width: 100%;'");
							cur.flag = false;
							return cur;
						}));
					}
					if(this.page < res.data.last_page){
						this.moreFlag = true;
					}else{
						this.moreFlag = false;
					}
				})
			},
			changeNav(e){
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				this.navIndex = index;
				this.page = 1;
				this.getList();
			}
		}
	}
</script>

<style scoped>
	.conWrap{
		width: 100%;
		box-sizing: border-box;
		border: 2upx solid #E6E6E6;
		margin-top: 34upx;
	}
	.conItem{
		width: 100%;
		box-sizing: border-box;
		padding: 0 30upx;
		border-bottom: 2upx solid #E6E6E6;
	}
	.conItem:last-child{
		border-bottom: none;
	}
	.conItemT{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 22upx 0;
	}
	.conItemTL{
		width: calc(100% - 68upx);
		height: 48upx;
		line-height: 48upx;
		font-size: 28upx;
		color: #333333;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.conItemT>image{
		width: 48upx;
		height: 48upx;
	}
	.conItemB{
		padding-bottom: 34upx;
	}
	
	
	
	.navHead{
		width: 100%;
		height: 52upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.navHeadL{
		width: 328upx;
		height: 52upx;
		display: flex;
		align-items: center;
		background: #F7F7F7;
		border-radius: 8upx;
		border: 2upx solid #E6E6E6;
		box-sizing: border-box;
		position: relative;
	}
	.navHeadLItem{
		width: 50%;
		height: 52upx;
		line-height: 48upx;
		text-align: center;
		font-size: 24upx;
		color: #B3B3B3;
		border-radius: 8upx;
		border: 2upx solid transparent;
		box-sizing: border-box;
		position: absolute;
	}
	.navHeadLItem:first-child{
		top: -2upx;
		left: -2upx;
	}
	.navHeadLItem:last-child{
		right: -2upx;
		top: -2upx;
	}
	.navHeadLItem.active{
		background: white;
		color: #333333;
		box-shadow: 0px 6px 12px rgba(162, 162, 162, 0.16);
		border-color: #E6E6E6;
	}
	.navHeadR{
		display: flex;
		align-items: center;
	}
	.navHeadR>image{
		width: 32upx;
		height: 32upx;
		margin-right: 18upx;
	}
	.navHeadR>view{
		font-size: 28upx;
		line-height: 52upx;
		color: #555555;
	}
</style>
